<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function ajax5(){
      ////获取表单数据
      let name = document.querySelector(".name").value;
      let age = document.querySelector(".age").value;
      let data={//入库
        name1:name,
        age1:age
      }
      //字符串  对象--》后端  --》对象  序列化
      let s = encodeURIComponent(JSON.stringify(data));

      //1.创建ajax1对象
      let xmlHttpRequest = new XMLHttpRequest(data);
//2.配置向后端请求类型get post 异步请求数据 传递数据 2 &
      xmlHttpRequest.open("get","/servletstudy_war_exploded/ajax4?datajson="+s,true);
//监听数据是否请求成功
      xmlHttpRequest.onreadystatechange=function (){
//服务和客户端握手
        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status==200){
          if (xmlHttpRequest.responseText=="success"){
            let d = xmlHttpRequest.responseText;
            document.getElementById("show").innerHTML=d;
            alert("数据入库成功")
          }
        }
      }
      //4.发送请求
      xmlHttpRequest.send();
    }
  </script>
</head>
<body>
<div id="show" style="border: solid 3px red;width: 500px;height: 100px; background: lightblue;"></div>
姓名：<input type="text" name="name" class="name"><br>
年龄：<input type="text" name="age" class="age"><br>
<button onclick="ajax5()">
  提交
</button>

</body>
</html>